<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #imglist{
            width:100%;
            margin: 0 auto;
        }
        #imglist img{
            width: 600px;
            height: 350px;
            background: url('./imgs/loading.gif') no-repeat center center;
        }
    </style>
</head>
<body>
    <h1>滚动页面-  图片延迟加载</h1>
    <hr>
    <div id="imglist">
        <img loadpic="./imgs/Meinv001.jpg">
        <img loadpic="./imgs/Meinv002.jpg">
        <img loadpic="./imgs/Meinv003.jpg">
        <img loadpic="./imgs/Meinv004.jpg">
        <img loadpic="./imgs/Meinv005.jpg">
        <img loadpic="./imgs/Meinv006.jpg">
        <img loadpic="./imgs/Meinv007.jpg">
        <img loadpic="./imgs/Meinv008.jpg">
        <img loadpic="./imgs/Meinv009.jpg">
        <img loadpic="./imgs/Meinv010.jpg">
        <img loadpic="./imgs/Meinv011.jpg">
        <img loadpic="./imgs/Meinv012.jpg">
        <img loadpic="./imgs/Meinv013.jpg">
        <img loadpic="./imgs/Meinv014.jpg">
        <img loadpic="./imgs/Meinv015.jpg">
        <img loadpic="./imgs/Meinv016.jpg">
        <img loadpic="./imgs/Meinv017.jpg">
        <img loadpic="./imgs/Meinv018.jpg">
        <img loadpic="./imgs/Meinv001.jpg">
        <img loadpic="./imgs/Meinv002.jpg">
        <img loadpic="./imgs/Meinv003.jpg">
        <img loadpic="./imgs/Meinv004.jpg">
        <img loadpic="./imgs/Meinv005.jpg">
        <img loadpic="./imgs/Meinv006.jpg">
        <img loadpic="./imgs/Meinv007.jpg">
        <img loadpic="./imgs/Meinv008.jpg">
        <img loadpic="./imgs/Meinv009.jpg">
        <img loadpic="./imgs/Meinv010.jpg">
        <img loadpic="./imgs/Meinv011.jpg">
        <img loadpic="./imgs/Meinv012.jpg">
        <img loadpic="./imgs/Meinv013.jpg">
        <img loadpic="./imgs/Meinv014.jpg">
        <img loadpic="./imgs/Meinv015.jpg">
        <img loadpic="./imgs/Meinv016.jpg">
        <img loadpic="./imgs/Meinv017.jpg">
    </div>

    <script>
        //获取img的集合
        var imgs = imglist.getElementsByTagName('img');
        // 获取imglist的宽
        var box_width = imglist.offsetWidth;
        // console.log(box_width);
        
        //获取 视口的高度
        var view_height = document.documentElement.clientHeight;
        // console.log(view_height);
        //计算横着可以加载几张图片
        var x_number = Math.floor(box_width / imgs[0].offsetWidth);
        // console.log(x_number);
        
        //第一屏 加载的图片数量
        // Math.ceil((视口的高度-首图的顶部偏移量)/ 图片的高度 )* 横着加载图片的数量
        var first_number = Math.ceil( (view_height- imgs[0].offsetTop) / imgs[0].offsetHeight) * x_number;
        // console.log(first_number);

        //定义全局变量  记录加载到第几张
        var m = 0;
        //加载第一屏的图片
        loadImage(m, first_number);
        //调用之后 ,m值要加上新值
        m += first_number;

        //绑定 滚动事件
        // 滚动到图片一露头 就加载图片
        window.onscroll = function (){
            //加载图片 做数量判断
            if (m >= imgs.length) {return;}
            //求滚动条滚动了多少(IE)
            var top = document.body.scrollTop  || document.documentElement.scrollTop;

            //求还未加载的第一张图片到顶部的距离
            //m 就是未加载的第一张图片的索引
            var img_top = imgs[m].offsetTop;

            console.log(top + ':' + img_top);
            //图片到顶部的距离 = 视口高度 + 滚动条高度
            //计算加载下一行图片的 临界点
            if ( (top + view_height)  >= img_top) {
                //从 新图开始加载一行图片
                loadImage(m, x_number);
                m += x_number;//记录加载的图片数量!!
            }
        }
        
        /**
         * [loadImage 加载图片的函数]
         * @param   start [从第几章图片开始加载]
         * @param   size  [加载几张图片]
         */
        function loadImage(start, size){
            for (var i = start; i < (start + size); i++) {
                //加载图片 做数量判断
                if (i >= imgs.length) {return;}
                (function (i){
                    setTimeout(function (){
                        //设置 src 是的图片可以正常显示
                        imgs[i].src = imgs[i].getAttribute('loadpic');
                    },200)
                })(i)
            }
        }

    </script>

</body>
</html>